<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>

<body>
    <button type="button">点我变变变</button>
    <div id="h1div">
        <h1>我是一级标题</h1>
    </div>
    <p class="pdemo">java117班</p>

    <input type="text" value="我是一个input框">
    <a href="https://www.jd.com/">超链接</a>
    <img src="pic/cat.jpg" width="300px">

    <div class="div" style="font-size: 36px">我是一个文本</div>

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>

    <script>
        //$(选择器).事件(回调函数);
        $("button").click(function () {
            $(".pdemo").text("祝java117同学都能拿到满意offer"); //有参数时，表示设置
            $("#h1div").html("<h2>我是二级标题</h2>");
            $("input").val("我变啦~");
        });

        // text() 设置或返回所选元素的⽂本内容
        let p = $(".pdemo").text(); // 无参数时，表示读取
        console.log(p);

        // html() 设置或返回所选元素的内容（包括HTML标签）
        let text = $("#h1div").html();
        console.log(text);

        // val() 设置或返回表单字段的值  $(":text") 所有type="text"的<input>元素
        let val = $(":text").val();
        console.log(val);

        $(document).ready(function () {
            $("button").click(function () {
                $(this).hide(); // $(this) 获取当前HTML元素
            });
        });

        // 获取属性
        let href = $("a").attr("href");
        console.log(href);
        // 设置属性
        $("a").attr("href", "https://www.baidu.com");

        $("img").click(function () {
            let imgSrc = $("img").attr("src");
            console.log(imgSrc);
            if (imgSrc == "pic/doge.jpg") {
                $(this).attr("src", "pic/cat.jpg");
            } else {
                $(this).attr("src", "pic/doge.jpg");
            }
        });

        // 获取CSS
        let fontSize = $(".div").css("font-size");
        console.log(fontSize);
        // 设置CSS
        $(".div").css("font-size", "20px");

        $("ol").append("我是append"); // 在被选元素的结尾插⼊内容
        $("ol").prepend("我是prepend"); // 在被选元素的开头插⼊内容
        $("ol").after("我是after"); // 在被选元素之后插⼊内容
        $("ol").before("我是before"); // 在被选元素之前插⼊内容

        $("ol").remove(); // 移除整个元素
        $("ol").empty(); // 清空

    </script>

</body>

</html>